<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <title>充值</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style rel="stylesheet" type="text/css">
      .tips {
        display: block;
        margin-top: -15px;
        color: #999;
      }
      .pay-type {
        margin-top: 1rem;
      }
      .pay-type img {
        width: 20px;
        margin-right: 4px;
      }
      .pay-type li {
        margin-right: 12px;
        padding: 4px 15px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
      }
      .pay-type li.active {
        border-color: #0967eb;
      }
      p {
        user-select: none;
      }
      p > strong {
        font-size: 16px;
        color: #333;
      }
      p > i {
        vertical-align: bottom;
        font-size: 1.5rem !important;
        margin-right: 0.1rem;
        color: #0967eb;
        font-weight: bold;
      }
      .buy-tips {
        flex-wrap: wrap;
        margin-top: 15px;
      }
      .buy-tips div {
        line-height: 2.2rem;
        color: #333;
        font-size: 0.9rem;
      }
      .buy-tips div i {
        vertical-align: bottom;
        font-size: 1rem;
        margin-right: 0.2rem;
        color: #0967eb;
        font-weight: bold;
      }

      /* 快速充值金额 */
      .quick-recharge {
        gap: 0.5rem;
        margin: 2rem 0;
      }
      .quick-recharge li {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 6px 18px;
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        user-select: none;
      }
      .quick-recharge li:hover {
        color: #00bca0;
        border-color: #00bca0;
        background-color: #e6faf7;
      }
      .quick-recharge li.active {
        color: #0967eb;
        border-color: #b3f1e8;
        outline: 0;
      }
      .quick-recharge li strong {
        font-size: 1rem;
      }
      .quick-recharge li span {
        color: rgb(107, 114, 128);
        white-space: nowrap;
      }

      @media screen and (max-width: 768px) {
        .quick-recharge {
          flex-wrap: wrap;
        }
      }

      /* 扫码 */
      /* #quick-recharge-wrapper {} */
      #quick-recharge-wrapper .qrcode {
        width: 200px;
        height: 200px;
        margin: 1rem auto;
        /* background-color: #333; */
      }
      #quick-recharge-wrapper p {
        padding: 0 2rem;
        color: red;
      }

      /* 联系上级 */
      #contact-superiors {
        padding: 10px 20px;
      }
      #contact-superiors li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      #contact-superiors li:last-child {
        margin-bottom: 0;
      }
      #contact-superiors li img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
      #contact-superiors li i {
        font-size: 12px;
        cursor: pointer;
        color: #999;
      }
      /* 充值卡 */
      #textarea-card {
        padding: 10px 20px;
        box-sizing: border-box;
      }
      #textarea-card textarea {
        width: 100%;
        resize: none;
        padding: 10px;
        box-sizing: border-box;
        border: none;
      }
      .loading-wrapper {
        width: 200px;
        height: 200px;
        padding: 75px 0 0;
        text-align: center;
        box-sizing: border-box;
      }
      .loading-image {
        width: 50px;
        height: 50px;
        animation: loading 3s ease-in-out infinite;
      }
      .loading-wrapper span {
        color: rgba(255, 0, 0, 0.6);
      }
      @keyframes loading {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body class="pear-container">
    <!-- 在线充值 -->

    <!-- 充值提示 -->
    <div class="layui-card">
      <div class="layui-card-body">
        <p>
          <i class="layui-icon layui-icon-about"></i>
          <strong>购买须知</strong>
        </p>
        <div class="layui-row buy-tips">
          <div class="layui-col-md6 layui-col-xs12">
            金币只可以在本平台使用，不可跨平台
          </div>
          <div class="layui-col-md6 layui-col-xs12">
            金币仅能用于兑换直接运营的产品和服务，不能兑换现金
          </div>
          <div class="layui-col-md6 layui-col-xs12">
            如充值发现问题请联系在线充值客服
          </div>
          <div class="layui-col-md6 layui-col-xs12">
            请您在充值时务必确认好您的充值金额/账号准确无误
          </div>
        </div>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-body">
        <p><strong>快速充值金额</strong></p>
        <ul class="quick-recharge flex align-center justify-between"></ul>
        <p><strong>其他金额</strong></p>
        <div class="other-money">
          <form class="layui-form layui-form-pane">
            <div class="layui-form-item pane">
              <label class="layui-form-label">金额</label>
              <div class="layui-input-block">
                <input
                  type="number"
                  name="amount"
                  class="layui-input"
                  min="0"
                />
              </div>
            </div>
          </form>
          <i class="tips">1元=1金币</i>
          <br />
          <p><strong>支付方式</strong></p>
          <ul class="pay-type flex align-center">
            <li class="active" data-type="wechat">
              <img
                src=""
                alt="微信"
              />
              微信
            </li>
            <li data-type="alipay">
              <img
                src=""
                alt="支付宝"
              />
              支付宝
            </li>
            <li data-type="card">
              <i class="layui-icon layui-icon-template-1"></i>
              充值卡
            </li>
          </ul>
          <br />
          <div class="flex align-center justify-center">
            <button
              id="quick-recharge-btn"
              type="button"
              class="pear-btn pear-btn-primary"
            >
              立即充值
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 设置充值弹窗内容 -->
    <div id="quick-recharge-wrapper" style="display: none">
      <div class="qrcode"></div>
      <p>
        扫码后请不要关闭此弹窗，否则会延迟到账 如有充值问题，请联系<a
          href="javascript:void(0)"
          >你的上级</a
        >
      </p>
    </div>

    <!-- 上级联系方式 -->
    <div id="contact-superiors" style="display: none">
      <ul>
        <li>
          <img
            src=""
            alt="qq"
          />
          <strong>Q&nbsp;&nbsp;Q:</strong>
          <span>123456</span>
          <i class="layui-icon layui-icon-template-1" data-copy="123456"></i>
        </li>
        <li>
          <img
            src=""
            alt="wechat"
          />
          <strong>微信：</strong>
          <span>123456</span>
          <i class="layui-icon layui-icon-template-1" data-copy="123456"></i>
        </li>
      </ul>
    </div>

    <!-- textarea -->
    <div id="textarea-card" style="display: none">
      <textarea name="cards" rows="8" placeholder="请输入充值卡号"></textarea>
    </div>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/permission.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script src="/app/admin/admin/js/qrcode.js"></script>
    <script rel="script" type="text/javascript">
      // Quick-recharge // 可通过接口获取
      const QUICK_RECHARGE = [5, 10, 50, 100, 500, 1000, 2000, 5000]
      const PAY_TYPE = ['wechat', 'alipay', 'card']

      let payType = 0 // 默认支付宝支付, 1 微信

      // 表格渲染
      layui.use(['table', 'form', 'common', 'popup', 'util'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.$
        let common = layui.common
        let util = layui.util
        let layer = layui.layer

        /**
         * @deprecated 重新渲染快速充值金额事件
         */
        const reRenderQuickRecharge = () => {
          const quickRechargeElement = $('.quick-recharge')
          const fragment = new DocumentFragment()
          $.each(QUICK_RECHARGE, function (index, value) {
            fragment.appendChild(
              $(`<li data-money="${value}">
                        <strong>${value}元</strong>
                        <span>${value}金币</span>
                      </li>`)[0]
            )
          })
          quickRechargeElement.append(fragment)
        }
        reRenderQuickRecharge()

        /**
         * @deprecated 移除所有选中效果
         * @param type 快速充值 | 支付方式； 默认为快速充值
         */
        const __remove_all_active_type__ = (type = 'quick') => {
          let className = type == 'quick' ? '.quick-recharge' : '.pay-type'
          $(`${className} li`).removeClass('active')
        }

        const __show_card__ = () => {
          layer.open({
            type: 1,
            title: '请输入充值卡卡号,多个请一行一个',
            shade: 0.1,
            area: ['400px', '310px'],
            content: $('#textarea-card'),
            btnAlign: 'c',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
              layer.confirm('确认充值吗?', function (index, layero) {
                rechargeMoney(
                  {
                    code: $('textarea[name="cards"]').val(),
                    pay_type: PAY_TYPE[payType],
                  },
                  function () {
                    layer.closeAll()
                  }
                )
              })
            },
          })
        }

        const __show_modal__ = (objs) => {
          let response = null // 获取支付响应
          let timer = null
          const endTimeOut = () => {
            if (timer) {
              clearTimeout(timer)
              timer = null
            }
          }

          const startFetchPayState = () => {
            endTimeOut()
            $.ajax({
              url: '/payment/getQueryRecharge',
              type: 'GET',
              data: {
                id: response.id,
              },
              success: function (res) {
                if (res.code) {
                  timer = setTimeout(startFetchPayState, 1000 * 5)
                  return
                }
                layer.msg(res.msg)
                endTimeOut()
                layer.closeAll()
              },
            })
          }

          const renderPayWindow = (data) => {
            let title = `${payType === 1 ? '支付宝支付' : '微信扫码'}`
            layer.open({
              type: 1,
              title,
              shade: 0.1,
              area: ['400px', '430px'],
              content: $('#quick-recharge-wrapper'),
              btnAlign: 'c',
              btn: ['取消'],
              yes: function (index, layero) {
                endTimeOut()
                layer.close(index)
              },
              cancel(index) {
                endTimeOut()
                layer.close(index)
              },
              success() {
                $('#quick-recharge-wrapper .qrcode').html('')

                setTimeout(() => {
                  if (payType == 0) {
                    // 生成二维码(微信支付需要)
                    new QRCode(
                      document.querySelector('#quick-recharge-wrapper .qrcode'),
                      {
                        text: data.qr,
                        width: 200,
                        height: 200,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H,
                      }
                    )
                  } else if (payType == 1) {
                    // 支付宝跳转新页面
                    $('#quick-recharge-wrapper .qrcode').html(`
                      <div class="loading-wrapper">
                        <img class="loading-image" src="${loadingBase64()}" alt="loading." />
                        <br/><br/><span>查询支付状态中...</span>
                      </div>
                    `)
                    const newWindow = window.open('', '_blank')
                    newWindow.document.write(data.qr)
                    newWindow.focus()
                  }
                  startFetchPayState()
                }, 60)
              },
            })
          }

          layer.confirm('确认充值吗?', function (index, layero) {
            layer.load()
            rechargeMoney(
              {
                amount: objs.amount,
                pay_type: PAY_TYPE[payType],
              },
              function (data) {
                response = data
                layer.closeAll('loading')
                renderPayWindow(data)
                layer.close(index)
              }
            )
          })
        }

        // 监听快速充值事件
        $('.quick-recharge').on('click', 'li', function (event) {
          __remove_all_active_type__()
          const money = Number($(this).attr('data-money'))
          $(this).addClass('active')
          //   金额填充到金额输入框
          $('input[name="amount"]').val(money)
        })

        // 监听切换支付方式
        $('.pay-type').on('click', 'li', function (event) {
          __remove_all_active_type__('pay-type')
          $(this).addClass('active')
          let index = $('.pay-type li').index($($(this).context))
          payType = index // 设置被选中的支付方式
        })

        // 快速充值确定按钮
        $('#quick-recharge-btn').on('click', function () {
          if (payType < 2) {
            const amount = $('input[name="amount"]').val()
            if (amount < 1) {
              layer.msg('充值金额不能小于1')
              return
            }
            // alipay & wechat.
            __show_modal__({
              amount,
              payType,
            })
          } else {
            __show_card__()
          }
        })

        // 联系上级弹窗
        const __contact_superiors__ = () => {
          layer.open({
            type: 1,
            title: '上级联系方式',
            shade: 0.1,
            area: ['250px', '140px'],
            content: $('#contact-superiors'),
          })
        }

        // 联系上级
        $('#quick-recharge-wrapper p a').on('click', function () {
          __contact_superiors__()
        })

        $('#contact-superiors i').on('click', function () {
          let value = $(this).attr('data-copy')
          copyText(value) // copy text to clipboard
        })
      })

      /**
       * @description 充值金额接口
       */
      function rechargeMoney(data, callback) {
        const $ = layui.$
        let URL = `/app/admin/v1-api/recharge`
        $.ajax({
          url: URL,
          type: 'POST',
          dateType: 'json',
          data,
          success: function (res) {
            if (res.code) {
              layer.alert(res.msg)
              layer.closeAll('loading')
              return
            }
            callback && callback(res.data)
          },
        })
      }

      // loading 图片
      function loadingBase64() {
        return ''
      }
    </script>
  </body>
</html>
